<template>
  <div id="page">
    <nav aria-label="...">
      <ul class="pagination" style="text-align: center">
        <li v-bind:class="{'disabled':pageNum <= 1}">
          <a href="javascript:;" aria-label="Previous" v-on:click="pageClick(1)">
            <span>首页</span>
          </a>
        </li>
        <li v-bind:class="{'disabled':pageNum <= 1}">
          <a href="javascript:;" aria-label="Previous" v-on:click="prePage(),$emit('pageNum')">
            <span>上一页</span>
          </a>
        </li>
        <li  v-for="index in indexs"  v-bind:class="{ 'active': pageNum == index}">
          <a v-on:click="pageClick(index)">{{index}}</a>
        </li>
        <li v-bind:class="{'disabled':pageNum >= totalPage}">
          <a href="javascript:;" aria-label="Next" v-on:click="nextPage()">
            <span>下一页</span>
          </a>
        </li>
        <li v-bind:class="{'disabled':pageNum >= totalPage}">
          <a href="javascript:;" aria-label="Next" v-on:click="pageClick(totalPage)">
            <span>尾页</span>
          </a>
        </li>
        <li><span>每页{{pageSize}}条记录，共{{total}}条记录，共{{totalPage}}页</span></li>
      </ul>
    </nav>
  </div>
</template>
<script>
export default {
  name: 'pagination-component',
  props: ['pageNum', 'pageSize', 'total'],
  data () {
    return {
      totalPage: 0
    }
  },
  computed: {
    indexs: function () {
      return this.indexMethod()
    }
  },
  methods: {
    prePage: function () {
      let pageNumTemp = this.pageNum
      if (pageNumTemp <= 1) {
        return
      }

      pageNumTemp--
      this.$emit('updatePageIndex', pageNumTemp)
      this.$emit('pageClick')
    },
    nextPage: function (data = null) {
      let pageNumTemp = this.pageNum
      if (pageNumTemp >= this.totalPage) {
        return
      }

      pageNumTemp++
      this.$emit('updatePageIndex', pageNumTemp)
      this.$emit('pageClick')
    },
    pageClick: function (data = null) {
      let pageNumTemp = this.pageNum
      pageNumTemp = data
      this.$emit('updatePageIndex', pageNumTemp)
      this.$emit('pageClick')
    },
    indexMethod: function () {
      if (this.total < 1) {
        this.totalPage = 0
      } else {
        if (this.total % this.pageSize === 0) {
          this.totalPage = parseInt(this.total / this.pageSize)
        } else {
          this.totalPage = parseInt(this.total / this.pageSize) + 1
        }
      }

      let pageNumTemp = this.pageNum
      let left = 1
      let right = this.totalPage
      let ar = []
      if (this.totalPage >= 5) {
        if (pageNumTemp > 3 && pageNumTemp < this.totalPage - 2) {
          left = pageNumTemp - 2
          right = pageNumTemp + 2
        } else {
          if (pageNumTemp <= 3) {
            left = 1
            right = 5
          } else {
            right = this.totalPage
            left = this.totalPage - 4
          }
        }
      }
      while (left <= right) {
        ar.push(left)
        left++
      }
      return ar
    }
  }
}
</script>
